<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
        }
    </style>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-card class="box-card" style="width: 90%;margin-left: 5%;line-height: 60px" >
        <div slot="header" class="clearfix">
            <span>高级搜索</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>

        <el-row v-if="show==false">
            <el-button @click="show=true" icon="el-icon-arrow-down">展开</el-button>
        </el-row>


        <div v-show="show">
       <el-row>
          <el-col :span="2">
              任职区域:
          </el-col>
           <!--//区域选择-->
           <el-col  :span="2">
               <template>
                   <el-select v-model="province" placeholder="请选择">
                       <el-option
                               v-for="item in provinceList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
               </template>
           </el-col>
           <el-col offset="1" :span="2">
               <template>
                   <el-select v-model="city" placeholder="请选择">
                       <el-option
                               v-for="item in cityList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
               </template>
           </el-col>
           <el-col offset="1" :span="2">
               <template>
                   <el-select v-model="county" placeholder="请选择">
                       <el-option
                               v-for="item in countyList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
               </template>
           </el-col>
           <el-col offset="1" :span="2" >
               <template >
               <!-- `checked` 为 true 或 false -->
                        <el-checkbox v-model="checked">曾任</el-checkbox>
               </template>
           </el-col>

           <el-col :span="2">
               <el-input v-model="input1"></el-input>
           </el-col>
           <el-col :span="1" style="text-align: center;">
               --
           </el-col>
           <el-col :span="2">
               <el-input v-model="inpu2"></el-input>
           </el-col>


       </el-row>

        <el-row>
            <el-col :span="2">
                任职机构
            </el-col>
            <el-col :span="6">
                    <el-input v-model="inpu2"></el-input>
            </el-col>

            <el-col offset="1" :span="2" >
                <template >
                    <!-- `checked` 为 true 或 false -->
                    <el-checkbox v-model="checked">曾任</el-checkbox>
                </template>
            </el-col>

            <el-col :span="2">
                <el-input v-model="input1"></el-input>
            </el-col>
            <el-col :span="1" style="text-align: center">
                --
            </el-col>
            <el-col :span="2">
                <el-input v-model="inpu2"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                职务
            </el-col>
            <el-col :span="6">
                <el-input v-model="inpu2"></el-input>
            </el-col>

            <el-col offset="1" :span="2" >
                <template >
                    <!-- `checked` 为 true 或 false -->
                    <el-checkbox v-model="checked">曾任</el-checkbox>
                </template>
            </el-col>

            <el-col :span="2">
                <el-input v-model="input1"></el-input>
            </el-col>
            <el-col :span="1" style="text-align: center">
                --
            </el-col>
            <el-col :span="2">
                <el-input v-model="inpu2"></el-input>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                出生日期:
            </el-col>
            <el-col :span="2">
                <el-input v-model="input1"></el-input>
            </el-col>
            <el-col :span="1" style="text-align: center">
                --
            </el-col>
            <el-col :span="2">
                <el-input v-model="input2"></el-input>
            </el-col>
            <el-col offset="1" :span="1" style="text-align: right;padding-right: 10px">性别:</el-col>
            <el-col  :span="2">
                <template>
                    <el-select v-model="sex" placeholder="请选择">
                        <el-option
                                v-for="item in sexList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>

            <el-col :span="1" style="text-align: right;padding-right: 10px">学历:</el-col>
            <el-col  :span="2" style="text-align: right;padding-right: 10px">
                <template>
                    <el-select v-model="education" placeholder="请选择">
                        <el-option
                                v-for="item in educationList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>

            <el-col :span="1" style="text-align: right;padding-right: 10px">学位:</el-col>
            <el-col  :span="2">
                <template>
                    <el-select v-model="diploma" placeholder="请选择">
                        <el-option
                                v-for="item in diplomaList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>



        </el-row>

        <el-row>
            <el-col :span="2">
               排序:
            </el-col>
            <el-col  :span="2" style="text-align: right;padding-right: 10px">
            <template>
                <el-select v-model="sort" placeholder="请选择">
                    <el-option
                            v-for="item in sortList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-col>
            <el-col :span="1" offset="1" style="text-align: right;padding-right: 10px">分组:</el-col>
            <el-col  :span="2">
                <template>
                    <el-select v-model="group" placeholder="请选择">
                        <el-option
                                v-for="item in groupList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>

            <el-col offset="1" :span="2" >
                <template >
                    <!-- `checked` 为 true 或 false -->
                    <el-checkbox v-model="checked">显示头像</el-checkbox>
                </template>
            </el-col>





        </el-row>
        </div>

        <el-row v-if="show==true">
            <el-button @click="show=false" icon="el-icon-arrow-up">收起</el-button>
        </el-row>


            <el-row>
                <el-col :span="2">
                    学校
                </el-col>
                <el-col :span="6">
                    <el-input v-model="input2"></el-input>
                </el-col>

                <el-col offset="1" :span="2" >
                    <template >
                        <!-- `checked` 为 true 或 false -->
                        <el-checkbox v-model="checked">在读</el-checkbox>
                    </template>
                </el-col>
                <el-col :span="1" style="text-align: right;padding-right: 10px">专业:</el-col>
                <el-col  :span="6">
                    <el-input v-model="input2"></el-input>
                </el-col>

        </el-row>

        <el-row>

            <el-col :span="2">
                政治面貌
            </el-col>

            <el-col  :span="2">
                <template>
                    <el-select v-model="politicsStatus" placeholder="请选择">
                        <el-option
                                v-for="item in politicsList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
            <el-col offset="1" :span="1" style="text-align: right;padding-right: 10px">籍贯:</el-col>
            <el-col  :span="2">
                <template>
                    <el-select v-model="province" placeholder="请选择">
                        <el-option
                                v-for="item in provinceList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
            <el-col offset="1" :span="2">
                <template>
                    <el-select v-model="city" placeholder="请选择">
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
            <el-col offset="1" :span="2">
                <template>
                    <el-select v-model="county" placeholder="请选择">
                        <el-option
                                v-for="item in countyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row style="text-align: center"><el-button type="danger">搜索</el-button></el-row>


        <el-row >
            <el-col :span="2">
                推荐搜索:
            </el-col>

            <el-col :span="2">
                省委书记
            </el-col>
            <el-col :span="2">
                省委书记
            </el-col>
            <el-col :span="2">
                省委书记
            </el-col>
            <el-col :span="2">
                省委书记
            </el-col>


        </el-row>



    </el-card>

    <el-card class="box-card" style="width: 90%;margin-left: 5%;line-height: 60px;margin-top: 30px">

        <div slot="header" class="clearfix">
            <el-row>
                <el-col :span="2">  <span>搜索结果</span></el-col>

                <el-col :span="1" offset="8">
                    排序:
                </el-col>
                <el-col  :span="2" style="text-align: right;padding-right: 10px">
                    <template>
                        <el-select v-model="sort" placeholder="请选择">
                            <el-option
                                    v-for="item in sortList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-col>
                <el-col :span="1" offset="1" style="text-align: right;padding-right: 10px">分组:</el-col>
                <el-col  :span="2">
                    <template>
                        <el-select v-model="group" placeholder="请选择">
                            <el-option
                                    v-for="item in groupList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-col>

                <el-col offset="1" :span="2" >
                    <template >
                        <!-- `checked` 为 true 或 false -->
                        <el-checkbox v-model="checked">显示头像</el-checkbox>
                    </template>
                </el-col>
                <el-col :span="2">
                   <el-link>统计图</el-link>

                </el-col>
                <el-col :span="2">
                    <el-link>导出结果</el-link>

                </el-col>



                </el-row>


        </div>


        <el-row>
            <el-col :span="1" offset="1" v-for="name in resultList">{{name}}</el-col>
        </el-row>
        <el-row style="text-align: right">

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </el-row>



    </el-card>


</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            ids:[],
            show:true,

            resultList:["杨幂","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","周杰伦"
                ,"周杰伦","周杰伦","周杰伦","周杰伦","周杰伦","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂","杨幂",
                ],

            searchParams :{


            },


            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: [],
            dialogVisible: false,

            provinceList: [{
                value: '选项1',
                label: '湖北'
            }, {
                value: '选项2',
                label: '湖南'
            }, {
                value: '选项3',
                label: '广东'
            }],

            sexList:[{
                value: '选项1',
                label: '男'
            }, {
                value: '选项2',
                label: '女'
            }, {
                value: '选项3',
                label: '未知'
            }],
            //学历
            educationList:[{
                value: '选项1',
                label: '大专'
            }, {
                value: '选项2',
                label: '本科'
            }, {
                value: '选项3',
                label: '硕士'
            }],


            education:'',
            //学位

            diplomaList:[{
                value: '选项1',
                label: '工学'
            }, {
                value: '选项2',
                label: '理学'
            }, {
                value: '选项3',
                label: '文学',
            }],
            diploma:'',





            cityList: [{
                value: '选项1',
                label: '武汉'
            }, {
                value: '选项2',
                label: '长沙'
            }, {
                value: '选项3',
                label: '广州'
            }],

            countyList: [{
                value: '选项1',
                label: '东湖'
            }, {
                value: '选项2',
                label: '橘子洲头'
            }, {
                value: '选项3',
                label: '白云山'
            }],


            //排序

            sortList:[{
                value: '选项1',
                label: '拼音正序'
            }, {
                value: '选项2',
                label: '拼音倒序'
            }, {
                value: '选项3',
                label: '等级正序'
            }, {
                    value: '选项4',
                    label: '等级倒叙'
                }],
            sort:'',
            groupList:[{
                value: '选项1',
                label: '性别'
            }, {
                value: '选项2',
                label: '年龄'
            }, {
                value: '选项3',
                label: '机构'
            }, ],



            politicsList:[
                {
                    value: '选项1',
                    label: '群众'
                }, {
                    value: '选项2',
                    label: '团员'
                }, {
                    value: '选项3',
                    label: '党员'
                },

            ],


            politics:'',
            county: '',
            city:'',
            province:'',
            checked: true,
            sex:''



        },



        methods: {

            findAll(){

                axios.get("/student").then((res)=>{

                    this.tableData = res.data;


                })
            } ,
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.ids =  this.getIds(this.multipleSelection)
            },
            getIds: function (multipleSelection) {
                var ids = new Array();
                multipleSelection.forEach(a=>ids.push(a.id))
                return ids;
            },


            getNewData(){
                axios.get("student/new");
                this.findAll()
            },

            deleteByIds(){
                this.dialogVisible = false;
                axios.post("student/deleteByIds",this.ids).then(res=> {
                    if (res.data == true) {
                        this.$message.success("删除成功")
                    } else {
                        this.$message.error("删除失败")
                    }


                    this.findAll()
                } )




            }


        },

        created(){
            this.findAll()

        }


    })
</script>
</html>